﻿// element本身弹窗的样式

// 一、修改messagebox弹窗的样式
.el-message-box {
  border: none;
  vertical-align: 160px;
  // 头部
  .el-message-box__header {
    height: 40px;
    line-height: 40px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: $theme_main_color;
    padding: 0 0 0 20px;
    font-weight: bold;
    border-bottom: none;
    .el-message-box__title {
      color: #fff;
      line-height: 40px;
    }
    .el-message-box__headerbtn {
      top: 8px;
      font-size: 24px;
      .el-message-box__close {
        color: #fff;
        transition: transform linear .5s;
        &:hover{
          color: #fff;
          transform: rotate(360deg);
        }
      }
    }
  }
  // 内容部分
  .el-message-box__content {
    text-align: center;
    color: $theme_font_color;
  }
  // 底部按钮
  .el-message-box__btns {
    text-align: center;
  }
}

// 二、弹窗相关的层级
.el-loading-mask{
  z-index: 99999;
}
.el-message-box__wrapper{
  z-index: 999999 !important;
}

// 三、修改Dialog弹窗的样式
.el-dialog {
  border-radius: 8px;
  padding: 0 !important;
  // 头部
  .el-dialog__header {
    height: 40px;
    line-height: 40px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: $theme_main_color;
    padding: 0 0 0 20px;
    font-weight: bold;
    border-bottom: none;
    // 头部文字内容
    .el-dialog__title {
      color: #fff;
      line-height: 40px;
    }
    // 头部右侧的按钮
    .el-dialog__headerbtn {
      top: 8px;
      font-size: 24px;
      .el-dialog__close {
        color: #fff;
        transition: transform linear .5s;
        &:hover{
          color: #fff;
          transform: rotate(360deg);
        }
      }
    }
  }
  // 主要内容部分
  .el-dialog__body {
    padding: 10px 15px;
  }
  /* 底部部分 */
  .el-dialog__footer {
    text-align: center;
  }
}
// 设置页面配置的弹窗
.settingsDialog {
  .el-dialog__body {
    padding: 0 !important;
  } 
}

// 四、消息通知的弹窗（抽屉）
.self_drawer {
  // 头部
  .el-drawer__header {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: $theme_font_color;
    margin-bottom: 0px;
    &>span{
      outline: none;
    }
    .el-drawer__close-btn{
      outline: none;
      i{
        font-size: 24px;
        transition: transform linear .5s;
        &:hover{
          transform: rotate(360deg);
        }
      }
    }
  }
  // 主体内容部分
  .el-drawer__body {
    width: 100%;
    height: 60%;
    // 展示的内容列表
    ul.drawer_messageList {
      width: 100%;
      height: 100%;
      overflow: auto;
      // 没有消息通知时
      .no_notifition{
        text-align: center;
        padding-top: 40px;
        p{
          width: 100%;
          margin-top: 5px;
          line-height: 28px;
          font-size: 14px;
        }
      }
    }
    // 版本号相关的信息
    .drawer_versionInfo {
      width: 100%;
      padding-top: 40px;
      p {
        width: 100%;
        text-align: center;
        margin-top: 5px;
        line-height: 28px;
        font-size: 14px;
      }
      p.drawer_versionInfo_title{
        color: #000;
        padding-left: 16px;
        text-align: left;
        line-height: 32px;
        font-size: 16px;
      }
    }
    // 布局相关的信息
    .drawer_layoutInfo {
      width: 100%;
      padding-top: 20px;
      p.drawer_layoutInfo_title{
        color: #000;
        padding-left: 16px;
        text-align: left;
        line-height: 32px;
        font-size: 16px;
      }
      ul.drawer_layoutInfo_list{
        width: 100%;
        padding: 10px 20px 0;
        li {
          float: left;
          width: 100px;
          padding: 10px 18px 0;
          margin-left: 10px;
          cursor: pointer;
          p {
            width: 100%;
            text-align: center;
            line-height: 28px;
            font-size: 14px;
          }
        }
        &>li:first-child {
          margin-left: 0;
        }
        &>li:hover, &>li.active {
          background-color: #f0f0f0;
          p {
            color: $theme_main_color;
          }
        }
      }
    }
  }
}

// 五、修改md编辑弹窗的样式
.md_dialog {
  top: 20px;
  .el-dialog {
    margin-top: 0 !important;
  }
}
